<!DOCTYPE html>
<html>
<head>
	<title>Add Expense</title>
	<script type="text/javascript" src="scripts/local-storage-extensions.js"></script>	
	<script type="text/javascript" src="scripts/storage.js"></script>
	<script type="text/javascript" src="scripts/expenses.js"></script>
	<script type="text/javascript" src="scripts/accounts.js"></script>
	<script type="text/javascript" src="scripts/categories.js"></script>
	
	<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
	  
	  <!-- jQuery and jQuery Mobile -->
   <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
   <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

   <script type="text/javascript">
	   $(function () {
	            $("#datepicker").datepicker({ dateFormat: "dd/mm/yy" });
	        });
   </script>
</head>
	 
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <a id="home-button" data-role="button" href="#" data-icon="home" data-iconpos="left"
        class="ui-btn-left">
            Home
        </a>
        <h3>
            Add Expense
        </h3>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain" style="width:45%; display: inline-block">
            <label for="categories">
                Category:
            </label>
            <select id="categories" name="">
            	<option value="">
                     Choose
                </option>
                <option value="home">
                     Home
                </option>
                <option value="utilities">
                     Utilities
                </option>
                <option value="foodAndGroceries">
                     Groceries
                </option>
                <option value="entertainment">
                     Entertainment
                </option>
                <option value="medical">
                     Medical
                </option>
            </select>
        </div>
        <div data-role="fieldcontain" style="width:45%;display: inline-block">
            <label for="subcategories">
                Subcategory:
            </label>
            <select id="subcategories" name="">
                <option value="">
                    Choose
                </option>
            </select>
        </div>
    </div>

    <div data-role="content" style="width:25%;display: inline-block">
        <div data-role="fieldcontain">
            <label for="textinput1">
                Date:
            </label>
            <input name="" id="datepicker" placeholder="" value="" type="text">
        </div>
    </div>

    <div data-role="content" style="width:50%;display: inline-block">
        <div data-role="fieldcontain">
            <label for="textinput1">
                Amount:
            </label>
            <input name="" id="amount" placeholder="" value="" type="text">
        </div>
    </div>
 	<div data-role="content">
        <div data-role="fieldcontain" style="width:40%; display: inline-block">
            <label for="paymentMethods">
                Payment Method:
            </label>
            <select id="paymentMethods" name="">
            	<option value="">
                     Choose
                </option>
                <option value="debit">
                     Debit Cards
                </option>
                <option value="credit">
                     Credit Cards
                </option>
                <option value="bank">
                     Bank Acc
                </option>
                <option value="cash">
                     Cash
                </option>
            </select>
        </div>
        <div data-role="fieldcontain" style="width:40%;display: inline-block">
            <label for="accountsMenu">
                Account:
            </label>
            <select id="accountsMenu" name="">
                <option value="">
                    Choose
                </option>
            </select>

        </div>
        <span   id="availableMoney"></span>
    </div>


    <div data-role="content" style="">
        <div data-role="fieldcontain">
            <label for="textinput1">
                Notes:
            </label>
            <input name="" id="notes" placeholder="" value="" type="text">
        </div>
    </div>

    <div style="width: 50%; margin-left:25%" id="add-expense-button" data-role="content">
        <a id="add-expsense-button" data-role="button" href="#page1" data-icon="plus" data-iconpos="left">
            Add Expense
        </a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            Telerik Academy Teamwork Project
        </h3>
    </div>
</div>
	<script type="text/javascript" src="scripts/add-expense-ui.js"></script>
</body>
</html>